<template>
  <div class="simi-song">
    <mini-table>
      <!-- 左边 -->
      <a href="javascript:;" class="hot-a" slot="left">相似歌曲</a>
      <!-- 右边 -->
      <div slot="right"></div>
      <div slot="body" style="padding-top: 20px">
        <!-- 身体盒子 -->
        <div class="simi-box" v-for="item in simiSong" :key="item.id">
          <div class="a">
            <a
              href="javascript:;"
              style="color: #333"
              @click="toSong(item.id)"
              >{{ item.name }}</a
            >
            <a href="javascript:;" style="color: #999">{{
              item.artists[0].name
            }}</a>
          </div>
          <div class="play" @click="play(item.id)"></div>
          <div class="add"></div>
        </div>
      </div>
    </mini-table>
  </div>
</template>

<script>
import { getSongURL } from '@/api/api.js'
import MiniTable from '../../../components/common/mini-table.vue'
export default {
  components: {
    MiniTable
  },
  props: {
    simiSong: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    // 点击播放
    async play(id) {
      const { data: res } = await getSongURL(id)
      console.log(res)
      this.$store.commit('savaSongURL', [])
      this.$store.commit('savaSongURL', [res[0].url])
    },
    async toSong(id) {
      this.$router.push({
        path: '/song',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
.simi-song {
  width: 200px;
  margin: 20px auto;
  .simi-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    .a {
      width: 120px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
    }
    .play,
    .add {
      width: 10px;
      height: 11px;
      background: url('https://s2.music.126.net/style/web2/img/icon2.png?c293848a7eabc8863ae9182cd22e0daf');
      &:hover {
        cursor: pointer;
      }
    }
    .play {
      background-position: -69px -455px;
    }
    .add {
      background-position: -87px -454px;
    }
  }
}
</style>
